<template>
	<view class="return-list__-content">
		<view v-for="v in 5">
			<view class="tab">
				<view class="tabItem" :class="{'tabItem_active':tabIndex == index}" v-for="(item,index) in tabList" :key="index"
				 @tap="switchTab(index)">{{item}}</view>
			</view>
			<view class="border-number">
				<view>订单编号：202103543956905775024420</view>
				<view class="title">退款</view>
			</view>
			<view class="commodity-content">
				<image src=""></image>
				<view class="commodity">
					<view class="title">五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟</view>
					<view class="stitle">19年,高三</view>
					<view class="price-sold">
						<view class="price">￥999</view>
						<view class="sold">x1</view>
					</view>
				</view>
			</view>
			<view class="tips">
				<view class="message">
					<view class="message-tit">提交申请</view>
					<view class="message-con">您的服务单已申请成功，等待售后处理</view>
				</view>
				<view class="cancle-btn" @tap="cancleReturn">取消</view>
			</view>
		</view>
		<view class="no-more">— 没有更多了 —</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0, //选项卡索引
				tabList: ['全部', '处理中', '已完成'], //选项卡列表

			}
		},
		methods: {
			// 取消退款
			cancleReturn() {
				console.log('取消退款');
			},
			// 切换选项卡
			switchTab(index) {
				if (this.tabIndex != index) {
					this.tabIndex = index;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.return-list__-content {
		margin-top: 120upx;

		.border-number {
			padding: 0 30upx;
			width: 100%;
			box-sizing: border-box;
			border-bottom: 2upx solid #E7E7E7;
			line-height: 76upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			font-size: 26upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			opacity: 1;

			.title {
				color: #E43841;
			}
		}

		.commodity-content {
			display: flex;
			padding: 30upx;
			background-color: #FFFFFF;
			border-top: 2upx solid #E7E7E7;

			image {
				width: 180upx;
				height: 180upx;
				background-color: #FAFAFA;
			}

			.commodity {
				margin-left: 20upx;
				width: calc(100% - 200upx);

				.title {
					overflow: hidden; //将超出的部分隐藏
					text-overflow: ellipsis; //超出部分用省略号显示
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					opacity: 1;
				}

				.stitle {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					opacity: 1;
					margin: 10upx 0;
				}

				.price-sold {
					display: flex;
					justify-content: space-between;

					.price,
					.sold {
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 40upx;
						color: #333333;
						opacity: 1;
					}

					.sold {
						color: #CDCDCD;
					}
				}
			}
		}

		.tips {
			padding: 20upx 30upx;
			background-color: #FFFFFF;
			width: 100%;
			box-sizing: border-box;

			.message {
				background-color: #F7F7F7;
				width: 100%;
				line-height: 90upx;
				border-radius: 10upx;
				display: flex;
				padding: 0 30upx;
				box-sizing: border-box;

				.message-tit {
					font-size: 32upx;
					color: #666666;
				}

				.message-con {
					margin-left: 40upx;
					font-size: 24upx;
					color: #999999;
				}
			}

			.cancle-btn {
				width: 116upx;
				height: 60upx;
				line-height: 60upx;
				background: #F7F7F7;
				border-radius: 30upx;
				font-size: 28upx;
				color: #666666;
				text-align: center;
				margin-left: auto;
				margin-top: 20upx;
			}
		}

		.no-more {
			width: 100%;
			text-align: center;
			font-size: 28upx;
			color: #999999;
			margin-top: 30upx;
		}
	}
</style>
